<template>
<div>
  <h1>问题列表-匿名的</h1>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="问题">
        <el-input v-model="search.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="search.type" placeholder="请选择类型">
          <el-option label="技术点" value="技术点" />
          <el-option label="项目" value="项目" />
          <el-option label="生活" value="生活" />
          <el-option label="感情" value="感情" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="questions">
      <el-table-column fixed prop="id" label="序号" width="100" />
      <el-table-column prop="title" label="问题" width="220" />
      <el-table-column prop="type" label="类型" width="120" />
      <el-table-column prop="info" label="问题描述" width="200" />
      <el-table-column prop="answer" label="参考答案" width="300" />
      <el-table-column prop="ctime" label="创建时间" width="200" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="update(scope.row)">修改</el-button>
          <el-button link type="danger" size="small" @click="del(scope.row.id,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="float: right;margin-right: 30px;margin-top: 20px">
    <el-pagination background layout="prev, pager, next" :total="total" />
  </div>
</div>
</template>

<script>
import request from '@/utils/request'
export default {
  data(){
    return{
      questions:[],
      total:10,
      search:{
        type:"",
        title:"",
        page:1,
        size:10
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods:{
    loadData(){
      //请求接口 axios get 键值对
      request({
        url: "http://localhost:8080/api/question/page?type="+this.search.type+"&title="+this.search.title+"&page="+this.search.page+"&size="+this.search.size,
        method: 'get'
      }).then(res=>{
        console.log(res);
        if(res.code==0){
          this.questions=res.data.list;
          this.total=res.data.size;
        }
      })
    },
  del(id,index){
    var msg = "您真的确定要删除吗？\n\n请确认！";
    if (confirm(msg)==true) {
      //请求接口 删除数据
      this.axios.post("question/del", {id: id}).then(res => {
        if (res.data.code == 0) {
          this.questions.splice(index, 1)
        }
      })
    }
  },
  update(obj){
    //修改 获取当前行对象 VueX 跳转到页面
    //存储到VueX
    this.$store.commit("setQ",obj);
    //实现页面跳转
    this.$router.push("/update")}
  }
}

</script>

<style scoped>

</style>
